<template>
<!-- //-- -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 会员购卡统计 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-row :gutter="20">
 
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.billNumber"
                                placeholder="订单号查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker
                                type="date"
                                placeholder="购卡时间"
                                v-model="query.beginTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </div>
                    </el-col>
                    <el-col style="padding: 0px; display: inline; width: 1%; line-height: 1.5">—</el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker type="date" placeholder="购卡时间" v-model="query.endTime" style="width: 100%"></el-date-picker>
                        </div>
                    </el-col>

                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

 
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        row-key="id"
                    >
                        <el-table-column width="180" prop="creationtime" label="购卡时间"></el-table-column>
                        <el-table-column width="180" prop="billNumber" label="订单号"></el-table-column>
                        <el-table-column prop="AfterLevel"   label="购卡类型" align="center"></el-table-column>
                        <el-table-column prop="BeforeLevel" label="初始等级" align="center"></el-table-column>

                        <el-table-column prop="WeChatPay" label="微信支付" align="center"></el-table-column>
                        <el-table-column prop="alipay" label="支付宝支付" align="center"></el-table-column>
                        <el-table-column prop="cashpay" label="现金支付" align="center"></el-table-column>
                        <el-table-column prop="CardID" label="卡号"></el-table-column>
                        <el-table-column prop="WeChatName" label="微信名称"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 15, 20, 30]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageTotal"
                        >
                        </el-pagination>
                    </div>
              
        </div>
    </div>
</template>
<script>
import axios from 'axios';
 
export default {
    // name: 'user_list',
    data() {
        return {
      
            query: {
                billNumber: '',
                type: -1,
                beginTime: '',
                endTime: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            loading: false,
            pageTotal: 0,
            //----------------图表--------------------
     
        };
    },
 
    created() {
        this.getData();
 
    },
    methods: {
        // 触发搜索按钮
        handleSearch() {
            this.query.pageIndex = 1;
            this.getData();
 
        },
 
        getData() {
            this.loading = true;
            var parmas = {
                type: this.query.type || -1,
                orderNumber: this.query.billNumber,
                beginTime: this.query.beginTime,
                endTime: this.query.endTime,
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };
            axios({
                url: config.gatewayUrl + '/statistics/LevelUpdate/GetPage',
                method: 'post',
                data: parmas,
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.pageTotal = res.data.total;
                this.tableData = JSON.parse(res.data.list);
                this.loading = false;
            });
        },
 
        //分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    },
    watch: {}
};
</script>